<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show article</title>

<script src="<?php echo $this->baseUrl();?>/jquery/jqueryui/jquery-1.6.4.min.js"></script>

</head>

<body>
<?php
$articles = $this->articles;
$count = 0;
foreach($articles as $article)
{
	echo '<table width="100%">';
  	echo 	'<tr>';
    echo 		'<td width="60%">';
    echo			"<b>{$article['Title']}</b><br>";
    echo			"Category : {$article['CategoryID']}<br>";
    echo		'</td>';
    echo 		'<td width="50%" align="right">';
    echo			"Author : {$article['CreatedByID']}<br>";
    echo			"Created date : {$article['CreatedTime']}<br>";
    echo		'</td>';
  	echo 	'</tr>';
  	echo 	'<tr>';
    echo 		'<td colspan="2" bgcolor="#CCFFFF">';
    echo			"<span>{$article['IntroContent']}</span><br>";
    $idReadmore='Readmore'.$count;
    echo			'<a id="'.$idReadmore.'"><u><b>Read more ...</b><u></a>';
    echo		'</td>';
  	echo 	'</tr>';
  	$idContent = 'Content'.$count;
  	echo 	'<tr id="'.$idContent.'">';
    echo 		'<td colspan="2">';
    echo			"{$article['Content']}<br>";
    echo		'</td>';
  	echo 	'</tr>';
	echo '</table>';
	
	//script ẩn nội dung chi tiết ngay khi load trang.
	echo '<script>';
	echo	'$("document").ready(function(){';
	echo	'	$("#'.$idContent.'").hide();';
	echo	'});';
	
	//script ẩn/hiện nội dung chi tiết khi nhấn Read more.
	echo	'$("#'.$idReadmore.'").bind("click",function(){';
	echo	'	$("#'.$idContent.'").slideToggle();';
	echo	'});';
	echo '</script>';
	
	echo '<br><br>';
	$count++;
}
?>
</body>
</html>